<template>
    <div class="container">
        <div class="left">
            <v-chart class="chart" :option="leftoption" />
        </div>

        <div class="right">
            <v-chart class="chart" :option="rightoption" />
        </div>
    </div>

    <div class="down">
        <hr>
        <div class="header">
            <span style="font-size: 14px;"><b>选择分析</b></span>
            <div class="extra">
                <el-form label-width="100px">
                    <span style="font-size: 14px;"><b>课程选择：</b></span>
                    <el-select v-model="course" placeholder="无" style="width: 150px">
                        <el-option label="无" value="无"></el-option>
                        <el-option label="Java" value="Java"></el-option>
                        <el-option label="C++开发" value="C++开发"></el-option>
                        <el-option label="高等数学" value="高等数学"></el-option>
                        <el-option label="线性代数" value="线性代数"></el-option>
                    </el-select>

                    <span style="font-size: 14px;margin-left: 300px;"><b>班级选择：</b></span>
                    <el-select v-model="clas" placeholder="无" style="width: 150px; margin-left: 10px;">
                        <el-option label="无" value="无"></el-option>
                        <el-option label="商务英语2班" value="商务英语2班"></el-option>
                        <el-option label="软工1班" value="软工1班"></el-option>
                        <el-option label="软工2班" value="软工2班"></el-option>
                        <el-option label="软件技术1班" value="软件技术1班"></el-option>
                    </el-select>
                </el-form>

                <el-button :icon="Search" @click="search(course, clas, currentPage, pageSize)" />
            </div>

        </div>

    </div>
</template>

<script setup>
import VChart from "vue-echarts"
import { ref } from "vue"

// option主要数据
const leftoption = ref({
    // 图表标题以及标题位置'center'/'left'/'right'
    title: {
        text: "各阶段成绩人数",
        left: "center"
    },
    //X轴数据
    xAxis: {
        type: 'category',
        data: ['60以下', '60-80', '80-90', '90-100'],
        axisLabel: {
            formatter: function (value) {
                return value; // 保持原样不变
            }
        },
        name: '分数', // X轴名称
        axisLine: {
            show: true // 显示X轴坐标轴线
        },
    },
    //Y轴数据
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: function (value) {
                return value.toFixed(0); // 显示具体的数值并保留0位小数
            }
        },
        name: '人数', // Y轴名称
        axisLine: {
            show: true // 显示Y轴坐标轴线
        },
    },
    //主要表数据
    series: [
        {
            data: [50, 120, 80, 30], // 每个分数段对应的人数
            //表形式 支持'bar'/'pie'/'line'等多种
            type: 'bar'
        }
    ]
});

const rightoption = ref({
    title: {
        text: '及格与不及格占比',
        left: 'center'
    },
    // 工具提示（tooltip）
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    // 图例（legend）的属性
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '成绩',
            type: 'pie',
            radius: ['70%'],
            data: [
                { value: 1048, name: '及格' },
                { value: 735, name: '不及格' },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
});

const course = ref();
const clas = ref();

</script>

<style scoped>
.chart {
    height: 228px;
}

.container {
    display: flex;
    height: 60%;
}

.left,
.right {
    flex: 1;
    padding-top: 60px;
}

.down {
    box-sizing: border-box;

}

.header {
    display: flex;
    align-items: center;
    margin-top: 30px;
}

.extra {
    display: flex;
    align-items: center;
    margin-left: 150px;

}

.el-input {
    margin-right: 20px;
}
</style>
